<template>
  <div>
    <!--1.视图-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="农作物名称">
        <el-input v-model="formInline.name" placeholder="农作物名称"></el-input>
      </el-form-item>
      <el-form-item label="状态" >
        <el-select v-model="formInline.status" placeholder="请选择状态" clearable>
          <el-option label="种植中" value="0"></el-option>
          <el-option label="记录完成" value="1"></el-option>
          <el-option label="成熟" value="2"></el-option>
          <el-option label="入库" value="3"></el-option>
          <el-option label="运输" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="openAdd">添加</el-button>
        <el-button type="primary" @click="excels">excel导出</el-button>
        <el-button type="primary" @click="dr">excel导入</el-button>
      </el-form-item>
      <el-upload
        class="upload-demo"
        drag
        action="http://localhost:8100/service/dr"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="cropId"
        label="序号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="cropEncoding"
        label="编码"
        width="120">
      </el-table-column>
      <el-table-column
        prop="name"
        label="农作物名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="pname"
        label="种植基地"
        width="120">
      </el-table-column>
      <el-table-column
        prop="uname"
        label="农户"
        width="300">
      </el-table-column>
      <el-table-column
        label="图片"
        width="120">
        <template v-slot="s">
          <el-image
            style="width: 100px;height: 100px"
            :src="s.row.img">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="地址"
        width="120">
        <template v-slot="s">
          {{s.row.provinceName}}-{{s.row.cityName}}-{{s.row.districtName}}
        </template>
      </el-table-column>
      <el-table-column
        prop="mname"
        label="种植方式"
        width="120">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="120">
      </el-table-column>
      <el-table-column
        prop="createBy"
        label="创建人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="120">
        <template v-slot="sp">
          <el-tag v-if="sp.row.status ==0 ">种植中</el-tag>
          <el-tag v-if="sp.row.status ==1 ">记录完成</el-tag>
          <el-tag v-if="sp.row.status ==2 ">成熟</el-tag>
          <el-tag v-if="sp.row.status ==3 ">入库</el-tag>
          <el-tag v-if="sp.row.status ==4 ">运输</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="coverArea"
        label="占地"
        width="120">
      </el-table-column>
      <el-table-column
        prop="output"
        label="产量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="isquality"
        label="是否质检"
        width="120">
        <template slot-scope="sco">
          <el-popover placement="top">
            <div slot="reference" class="name-warpper">
              <el-tag size="medium">{{sco.row.isquality =="0"?"未质检":"已质检"}}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="openAdd2(scope.row.cropId)" type="text" size="small">生长记录</el-button>
          <el-button @click="openAdd3(scope.row.cropId)" type="text" size="small">运输</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="gopage"
      :page-size="size"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="农作物名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="种植基地" :label-width="formLabelWidth">
          <el-select v-model="form.plantationId" placeholder="请选择种植基地">
            <el-option
              v-for="item in pids"
              :key="item.plantationId"
              :label="item.name"
              :value="item.plantationId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="农户" :label-width="formLabelWidth">
          <el-select v-model="form.userId" placeholder="请选择农户">
            <el-option
              v-for="item in uids"
              :key="item.userId"
              :label="item.name"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8100/service/img"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="省市区" :label-width="formLabelWidth">
          <el-cascader
            v-model="areaIds"
            :options="options"
            @change="getchange"
            clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="种植方式" :label-width="formLabelWidth">
          <el-select v-model="form.plantingMethodId" placeholder="请选择种植方式">
            <el-option
              v-for="item in pmid"
              :key="item.plantingMethodId"
              :label="item.name"
              :value="item.plantingMethodId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="form.createBy" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="form.status">
            <el-radio label="0" value="0">种植中</el-radio>
            <el-radio label="1" value="1">记录完成</el-radio>
            <el-radio label="2" value="2">成熟</el-radio>
            <el-radio label="3" value="3">入库</el-radio>
            <el-radio label="4" value="4">运输</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="占地(亩)" :label-width="formLabelWidth">
          <el-input v-model="form.coverArea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产量" :label-width="formLabelWidth">
          <el-input v-model="form.output" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否质检" :label-width="formLabelWidth">
          <el-radio-group v-model="form.isquality">
            <el-radio label="0" value="0">已质检</el-radio>
            <el-radio label="1" value="1">未质检</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {gettype1, listCrop, plantation, plantingMethod, type, user,add} from "../../api/farme/farme";


export default {
  name: "CropView",
  data() {
    return {
      //2.属性定义
      formInline:{},
      tableData:[],
      size: 3,
      total: 0,
      current: 1,
      dialogFormVisible:false,
      form: {},
      pids:[],
      uids:[],
      pmid:[],
      areaIds:[0,0,0],
      options:[],

    }
  }, methods: {
    //3.自定义函数
    list(){
    listCrop(this.current,this.size,this.formInline).then(res=>{
      this.tableData = res.data.list;
      this.total = res.data.total;
    })
    },
    gopage(current){
      this.current=current;
      this.list();
    },
    openAdd(){
    this.dialogFormVisible=true;
    },
    plantation(){
      plantation().then(res=>{
       this.pids=res.data;
      })
    },
    user(){
      user().then(res=>{
       this.uids=res.data;
      })
    },
    plantingMethod(){
      plantingMethod().then(res=>{
       this.pmid=res.data;
      })
    },
    getchange(id) {
      console.log(id);
      if (id.length > 0) {
        this.form.provinceId = id[0];
        this.form.cityId = id[1];
        this.form.areaId = id[2];
      } else {
        this.form.provinceId = '';
      }
    },
    gettype(){
      gettype1().then(res=>{
        console.log(res.data)
        this.options=res.data;
      })
    },
    add(){
      add(this.form).then(res=>{
        if (res.code==200){
          this.$message.success(res.msg)
          this.dialogFormVisible=false;
          this.list();
        }else {
          this.$message.error(res.msg)
        }
      })
    }
  }, created() {
    //4.钩子函数
    this.list();``
    this.plantation();
    this.user();
    this.plantingMethod();
    this.gettype();
  }
}
</script>

<style scoped>

</style>
